<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Graphs - Photon Admin Panel Theme</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="apple-touch-icon" href="iosicon.png" />
<!--    DEVELOPMENT LESS -->
<!--    <link rel="stylesheet/less" href="css/photon.less" media="all" />
        <link rel="stylesheet/less" href="css/photon-responsive.less" media="all" />-->
<!--    PRODUCTION CSS -->
        <link rel="stylesheet" href="css/css_compiled/photon-min.css" media="all" />
        <link rel="stylesheet" href="css/css_compiled/photon-min-part2.css" media="all" />
        <link rel="stylesheet" href="css/css_compiled/photon-responsive-min.css" media="all" />

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/css_compiled/ie-only-min.css" />
<![endif]-->

<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="css/css_compiled/ie8-only-min.css" />
        <script type="text/javascript" src="js/plugins/excanvas.js"></script>
        <script type="text/javascript" src="js/plugins/html5shiv.js"></script>
        <script type="text/javascript" src="js/plugins/respond.min.js"></script>
        <script type="text/javascript" src="js/plugins/fixFontIcons.js"></script>
<![endif]-->
        
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.pnotify.min.js"></script>

<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins/less-1.3.1.min.js"></script>        
<script type="text/javascript" src="js/plugins/xbreadcrumbs.js"></script>
<script type="text/javascript" src="js/plugins/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.autotab-1.1b.js"></script>
<script type="text/javascript" src="js/plugins/charCount.js"></script>
<script type="text/javascript" src="js/plugins/jquery.textareaCounter.js"></script>
<script type="text/javascript" src="js/plugins/elrte.min.js"></script>
<script type="text/javascript" src="js/plugins/elrte.en.js"></script>
<script type="text/javascript" src="js/plugins/select2.js"></script>
<script type="text/javascript" src="js/plugins/jquery-picklist.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/additional-methods.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="js/plugins/jquery.metadata.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mockjax.js"></script>
<script type="text/javascript" src="js/plugins/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.rating.pack.js"></script>
<script type="text/javascript" src="js/plugins/farbtastic.js"></script>
<script type="text/javascript" src="js/plugins/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jstree.js"></script>
<script type="text/javascript" src="js/plugins/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.stack.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/plugins/raphael.2.1.0.min.js"></script>
<script type="text/javascript" src="js/plugins/justgage.1.0.1.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.clock.js"></script>
<script type="text/javascript" src="js/plugins/jquery.countdown.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jqtweet.js"></script>
<script type="text/javascript" src="js/plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap-fileupload.min.js"></script>
<script type="text/javascript" src="js/plugins/prettify/prettify.js"></script>

<script type="text/javascript" src="js/common.js"></script>

        <script type="text/javascript">
            $(window).load(function () {
                drawGraphs();
            });
                            
            function drawGraphs(){
                // Simple Chart
                var sin = [], cos = [];
                for (var i = 0; i < 14; i += 0.5) {
                    sin.push([i, Math.sin(i)]);
                    cos.push([i, Math.cos(i)]);
                }
                var plot = $.plot($("#chart_01"),
                [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {
                    colors: ["#aad5f5", "#008fde", '#c6d695'],
                    series: {
                        lines: { show: true },
                        points: { show: true }
                    },
                    grid: { hoverable: true, clickable: true, borderWidth: 1, color: '#bbb' },
                    yaxis: { min: -1.2, max: 1.2 }
                });
                // Bar Chart
                var d1 = [];
                for (var i = 0; i <= 30; i += 1)
                    d1.push([i, parseInt(Math.random() * 30)]);

                var d2 = [];
                for (var i = 0; i <= 30; i += 1)
                    d2.push([i, parseInt(Math.random() * 30)]);

                $.plot($("#chart_02"), [ d1, d2 ], {
                    grid: { show: true, borderWidth: 1, color: '#bbb' },
                    xaxis: { show: true, ticks: 8 },
                    yaxis: { show: true, ticks: 8, color: '#bbb'},
                    colors: ["#aad5f5", "#008fde"],
                    series: {
                        stack: 0,
                        fill: 1,
                        bars: { show: true, barWidth: 0.9, lineWidth: 0, fill: 1 }
                    }
                });
                // Donut Chart
                var data = [];
                var lbls = { 0: 'Chocolate', 1: 'Marmelade', 2: 'Sugar Only' };
                for( var i = 0; i < 3; i++) {
                    data[i] = { label: "&nbsp;" + lbls [i] + "&nbsp;", data: Math.floor(Math.random()*100)+1 }
                }
                $.plot($("#chart_04"), data, {
                    colors: ["#aad5f5", "#008fde", '#c6d695'],
                    legend: { backgroundOpacity: 0 }, 
                    series: {
                        pie: { 
                            innerRadius: 0.5,
                            show: true
                        }
                    }
                });
                // Realtime Data
                var data = [], totalPoints = 15;
                function getRandomData() {
                    if (data.length > 0)
                        data = data.slice(1);
                    while (data.length < totalPoints) {
                        var prev = data.length > 0 ? data[data.length - 1] : 50;
                        var y = prev + Math.random() * 20 - 10;
                        if (y < 0)
                            y = 0;
                        if (y > 100)
                            y = 100;
                        data.push(y);
                    }
                    var res = [];
                    for (var i = 0; i < data.length; ++i)
                        res.push([i, data[i]])
                    return res;
                }
                var updateInterval = 500;
                var options = {
                    series: {   shadowSize: 0, 
                        lines: { show: true, fill:true, fillColor: { colors: [{opacity: 0.1}, {opacity: 0}] } }, 
                        points: { show: true, radius: 2, color: '#008fde' }
                    },
                    grid: { hoverable: true, clickable: true, borderWidth: 1, color: '#bbb' },
                    xaxis: { show: true, ticks: 8 },
                    yaxis: { show: true, min: 0, max: 100, ticks:4, color: '#bbb'},
                    colors: ["#008fde"]
                };
                var plot = $.plot($("#chart_05"), [ getRandomData() ], options);
                function update() {
                    plot.setData([ getRandomData() ]);
                    plot.draw();
                    setTimeout(update, updateInterval);
                }
                update();
            }
        </script>
        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

    <body class="body-inner">
            
    <div class="btn-toolbar btn-mobile-menus">
        <button class="btn btn-main-menu"></button>
        <button class="btn btn-user-menu"><i class="icon-logo"></i></button>
    </div>

    <div class="nav-fixed-left" style="visibility: hidden">
        <ul class="nav nav-side-menu">
            <li class="shadow-layer"></li>
            <li>
                <a href="dashboard.php">
                    <i class="icon-photon home"></i>
                    <span class="nav-selection">Dashboard</span>
                                    </a>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon list_nested"></i>
                    <span class="nav-selection">Form Elements</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="form-elements-input-fields.php">Input Fields</a>
                        </li>
                        <li>
                            <a href="form-elements-masked-input-fields.php">Masked Input Fields</a>
                        </li>
                        <li>
                            <a href="form-elements-autotabs.php">Autotabs</a>
                        </li>
                        <li>
                            <a href="form-elements-text-areas.php">Text Areas</a>
                        </li>
                        <li>
                            <a href="form-elements-select-menus.php">Select Menus</a>
                        </li>
                        <li>
                            <a href="form-elements-other-form-elements.php">Other Form Elements</a>
                        </li>
                        <li>
                            <a href="form-elements-form-validation.php">Form Validation</a>
                        </li>
                        <li>
                            <a href="form-elements-ui-elements.php">UI Elements</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon chart_alt"></i>
                    <span class="nav-selection">Graphs and Statistics</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="graphs-and-statistics-graphs.php">Graphs</a>
                        </li>
                        <li>
                            <a href="graphs-and-statistics-statistical-elements.php">Statistical Elements</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="typography.php">
                    <i class="icon-photon book_alt2"></i>
                    <span class="nav-selection">Typography</span>
                                    </a>
            </li>
            <li>
                <a href="grid.php">
                    <i class="icon-photon hash"></i>
                    <span class="nav-selection">Grid</span>
                                    </a>
            </li>
            <li>
                <a href="tables.php">
                    <i class="icon-photon new_window"></i>
                    <span class="nav-selection">Tables</span>
                                    </a>
            </li>
            <li>
                <a href="maps.php">
                    <i class="icon-photon map_pin_stroke"></i>
                    <span class="nav-selection">Maps</span>
                                    </a>
            </li>
            <li>
                <a href="sidebar-widgets.php">
                    <i class="icon-photon book_alt"></i>
                    <span class="nav-selection">Sidebar Widgets</span>
                                    </a>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon bolt"></i>
                    <span class="nav-selection">Error Pages</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="error-pages-400-bad-request.php">400 Bad Request</a>
                        </li>
                        <li>
                            <a href="error-pages-401-unauthorized.php">401 Unauthorized</a>
                        </li>
                        <li>
                            <a href="error-pages-403-forbidden.php">403 Forbidden</a>
                        </li>
                        <li>
                            <a href="error-pages-404-page-not-found.php">404 Page Not Found</a>
                        </li>
                        <li>
                            <a href="error-pages-500-internal-server-error.php">500 Internal Server Error</a>
                        </li>
                        <li>
                            <a href="error-pages-503-service-unavailable.php">503 Service Unavailable</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="help.php">
                    <i class="icon-photon info"></i>
                    <span class="nav-selection">Help</span>
                                    </a>
            </li>
            <li class="nav-logout">
                <a href="/">
                    <i class="icon-photon key_stroke"></i><span class="nav-selection">Logout</span>
                </a>
            </li>
        </ul>
    </div>        <div class="nav-fixed-topright" style="visibility: hidden">
    <ul class="nav nav-user-menu">
        <li class="user-sub-menu-container">
            <a href="javascript:;">
                <i class="user-icon"></i><span class="nav-user-selection">Company Name</span><i class="icon-menu-arrow"></i>
            </a>
                        <ul class="nav user-sub-menu">
                                <li>
                    <a href="javascript:;">My Profile</a>
                </li>
                                <li>
                    <a href="javascript:;">Settings</a>
                </li>
                                <li>
                    <a href="javascript:;">Messages</a>
                </li>
                                <li>
                    <a href="javascript:;">Help</a>
                </li>
                            </ul>
                    </li>
        <li>
            <a href="javascript:;">
                <i class="icon-photon mail"></i>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <i class="icon-photon comment_alt2_stroke"></i>
                <div class="notification-count">12</div>
            </a>
        </li>
    </ul>
</div>

<script>
    $(function(){
        setTimeout(function(){
            $('.nav-fixed-topright').removeAttr('style');
        }, 300);
        
        $(window).scroll(function(){
            if($('.breadcrumb-container').length){
                var scrollState = $(window).scrollTop();
                if (scrollState > 0) $('.nav-fixed-topright').addClass('nav-released');
                else $('.nav-fixed-topright').removeClass('nav-released')
            }
        });
        
        $('.user-sub-menu-container').on('click', function(){
            $(this).toggleClass('active-user-menu');
        });
    });
</script>

        
<div class="panel">
    <div class="panel-content filler">
        <div class="panel-logo"></div>
        <div class="panel-header">
            <h1><small>Graphs</small></h1>
            <button type="submit" class="btn btn-mini"><i class="icon-photon move_alt2"></i> Add New</button>
        </div>
        <div class="panel-search container-fluid">
            <form class="form-horizontal" action="javascript:;" />
                <input id="panelSearch" placeholder="Search" type="text" name="panelSearch" />
                <button class="btn btn-search"></button>
                <script>
                    $().ready(function(){
                        var searchTags = [
                            "Dashboard",
                            "Form Elements",
                            "Graphs and Statistics",
                            "Typography",
                            "Grid",
                            "Tables",
                            "Maps",
                            "Sidebar Widgets",
                            "Error Pages",
                            "Help",
                            "Input Fields",
                            "Masked Input Fields",
                            "Autotabs",
                            "Text Areas",
                            "Select Menus",
                            "Other Form Elements",
                            "Form Validation",
                            "UI Elements",
                            "Graphs",
                            "Statistical Elements",
                            "400 Bad Request",
                            "401 Unauthorized",
                            "403 Forbidden",
                            "404 Page Not Found",
                            "500 Internal Server Error",
                            "503 Service Unavailable"
                        ];
                        $( "#panelSearch" ).autocomplete({
                            source: searchTags
                        });
                    });            
                </script>
            </form>
        </div>
        <script type="text/javascript">
    $(function () {
        $("#jstree").jstree({ 
            "json_data" : {
                "data" : [
                                        {
                        "data" : { 
                            "title" : "Simple Chart", 
                            "attr" : { "href" : "#Simple_Chart" } 
                        }
                    },
                                        {
                        "data" : { 
                            "title" : "Stacked Bar Chart", 
                            "attr" : { "href" : "#Stacked_Bar_Chart" } 
                        }
                    },
                                        {
                        "data" : { 
                            "title" : "Donut Chart", 
                            "attr" : { "href" : "#Donut_Chart" } 
                        }
                    },
                                        {
                        "data" : { 
                            "title" : "Realtime Data Chart", 
                            "attr" : { "href" : "#Realtime_Data_Chart" } 
                        }
                    },
                                    ]
            },
            "plugins" : [ "themes", "json_data", "ui" ]
        })
        .bind("click.jstree", function (event) {
            var node = $(event.target).closest("li");
            document.location.href = node.find('a').attr("href");
            return false;
        })
        .delegate("a", "click", function (event, data) { event.preventDefault(); });
    });
</script>
    <div class="sidebarMenuHolder">
        <div class="JStree">
            <div class="Jstree_shadow_top"></div>
            <div id="jstree"></div>
            <div class="Jstree_shadow_bottom"></div>
        </div>
    </div>    </div>
    <div class="panel-slider">
        <div class="panel-slider-center">
            <div class="panel-slider-arrow"></div>
        </div>
    </div>
</div>
        <div class="main-content">
            <div class="breadcrumb-container">
    <ul class="xbreadcrumbs">
        <li>
            <a href="dashboard.php">
                <i class="icon-photon home"></i>
            </a>
        </li>
                <li>
            <a href="#">Graphs and Statistics</a>
            <ul class="breadcrumb-sub-nav">
                                <li>
                    <a href="graphs-and-statistics-graphs.php">Graphs</a>
                </li>
                                <li>
                    <a href="graphs-and-statistics-statistical-elements.php">Statistical Elements</a>
                </li>
                            </ul>
        </li>
                <li class="current">
            <a href="javascript:;">Graphs</a>
        </li>
    </ul>
</div>            <header>
                <i class="icon-big-notepad"></i>
                <h2><small>Graphs</small></h2>
                <h3><small>Flot Graphs implementation example.</small></h3>
            </header>
            <form class="form-horizontal" id="validation_form" />
                <div class="container-fluid">

                        <div class="form-legend" id="Simple_Chart">Simple Chart</div>
                        <!--Simple Chart begin-->
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset-more">
                               <div id="chart_01" style="height:250px;"></div> 
                            </div>
                        </div>
                        <!--Simple Chart end-->

                </div><!-- end container -->

                <div class="container-fluid">

                        <div class="form-legend" id="Stacked_Bar_Chart">Stacked Bar Chart</div>

                        <!--Stacked Bar Chart begin-->
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset-more">
                               <div id="chart_02" style="height:250px;"></div> 
                            </div>
                        </div>
                        <!--Stacked Bar Chart end-->

                </div><!-- end container -->

                <div class="container-fluid">

                        <div class="form-legend" id="Donut_Chart">Donut Chart</div>

                        <!--Donut Chart begin-->
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset-more">
                               <div id="chart_04" class="graph-embed" style="height:250px;"></div> 
                            </div>
                        </div>
                        <!--Donut Chart end-->

                </div><!-- end container -->

                

                <div class="container-fluid">

                        <div class="form-legend" id="Realtime_Data_Chart">Realtime Data Chart</div>

                        <!--Realtime Data Chart begin-->
                        <div class="control-group row-fluid">
                            <div class="span12 span-inset-more">
                               <div id="chart_05" class="graph-embed" style="height:250px;"></div> 
                            </div>
                        </div>
                        <!--Realtime Data Chart end-->

                </div><!-- end container -->

            </form>
        </div>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1936460-27']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
    </body>
</html>